<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 媒体查询 做响应式布局 不同终端写不同样式 满足条件样式生效 -->
	<link rel="stylesheet" media="screen and (min-width:1024px)"  href="./1-div.css">
	<!--使用内部样式表 -->
	<style>
		/* @media (max-width:800px)  {
			div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			body{
				background-color: yellow;
			}
		} */
		/* 使用and隔开条件 满足条件一 盒 条件二  条件三 */
		/* @media screen and (max-width:1024px) and (min-width:800px) {
				div{
					color: cyan;
					font-size: 28px;
				}
		} */
		/* 使用not 媒体查询条件取反 */
		/* @media not (min-width:1024px) {
			div{
				font-size: 80px;
				color: blue;
			}
		} */
		/* print 表示打印当前网页条件生效 */
		@media print {
			.title{
				display: none;
			}
			.tip{
				color: red;
				font-size: 28px;
			}
		}
	</style>
</head>
<body>
	<div class="title">我是一个块级元素</div>
	<div class="tip">我是块级元素</div>
</body>
</html>